<template>
  <div class="user-info-page">
    <el-card class="info-card">
      <h2 class="card-title">用户信息</h2>
      <el-table :data="userInfo" border>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
  
<script setup lang="ts">
import { ref } from 'vue';
  import { useAuthStore } from '@/stores/auth';
  
// 获取用户信息，这里假设从 authStore 中获取，实际根据项目情况调整
const authStore = useAuthStore();
const userInfo = ref([authStore.userInfo]);
  
</script>
  
<style scoped>
.user-info-page {
  padding: 20px;
}
  
.info-card {
  width: 80%;
  margin: 0 auto;
}
  
.card-title {
  margin-bottom: 20px;
}
</style>